<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="layout">
    <header class="header">
      <img src="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" alt="" @click="GoLogin()" />
      <div class="Sech_div">
      <van-icon name="search" />
       <input type="text" placeholder="请输入症状/疾病" @click="GoSearch()"/>
      </div>
      <button @click="msg()"><img src="../assets/image/ld.png" alt=""></button>
    </header>
    <main class="main">
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../assets/image/Swiper/image.png" alt="">
          </van-swipe-item>
          <van-swipe-item>
            <img src="../assets/image/Swiper/image copy.png" alt="">
          </van-swipe-item>

        </van-swipe>
      </div>
      <div class="baodian">
        <p>知识宝典</p>
      </div>
      <div class="xuan">
        <div class="bing" @click="GoDisease()">
          <p>常见病症</p>
          <img
            src="https://img2.baidu.com/it/u=2621461255,2095655052&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" />
        </div>
        <div class="yao" @click="GoDisease()">
          <p>常用药品</p>
          <img src="https://img0.baidu.com/it/u=3007039639,472852969&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"   alt="" />
        </div>
      </div>
      <div class="wenzhen">
        <p>问诊咨询</p>
      </div>
      <div class="ke">
        <van-grid>
          <van-grid-item icon="like" text="内科" />
          <van-grid-item icon="fire" text="眼科" />
          <van-grid-item icon="gift" text="骨科" />
          <van-grid-item icon="service" text="小儿科" />
          <van-grid-item icon="smile" text="传染病科" />
          <van-grid-item icon="browsing-history" text="皮肤性病" />
          <van-grid-item icon="award" text="耳鼻喉科" />
          <van-grid-item icon="qq" text="精神病科" />
        </van-grid>
      </div>
      <div class="pc">
        <p>健康评测</p>
      </div>
      <div class="xiong">
        <img src="https://img1.baidu.com/it/u=218262254,2011128418&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
      </div>
      <div class="zx">
        <p>健康咨询</p>
      </div>
      <div class="tabqh">
        <van-tabs>
          <van-tab title="健康要闻">
            <div class="yys">
              <dl>
                <dt>
                  <img
                    src="https://img1.baidu.com/it/u=2116092701,1412179621&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=841"
                    alt="">
                </dt>
                <dd @click="Gogirl()">
                  <p>女性朋友都注意啦！营养专家：<br>
                    如果不想失眠,清缘里6中吃<br>
                    法！
                  </p>
                  <p>范志红注册营养师</p>
                  <p>10分钟前</p>
                </dd>
              </dl>
            </div>
            <div class="zs">
              <p>早上起来第一杯水喝什么</p>
              <div class="tp">
                <img src="https://img2.baidu.com/it/u=639745635,4041880866&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
                  alt="">
                <img src="https://img2.baidu.com/it/u=4018562929,2923126910&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
                  alt="">
                <img src="https://img0.baidu.com/it/u=3030757094,2580327351&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
                  alt="">
              </div>
            </div>
          </van-tab>
          <van-tab title="医学动态">内容 2</van-tab>
          <van-tab title="医疗动态">内容 3</van-tab>
          <van-tab title="养生美容">内容 2</van-tab>
          <van-tab title="健身减肥">内容 3</van-tab>
        </van-tabs>
      </div>
    </main>
    <footer class="footer">
      <van-tabbar active-color="#ee0a24">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search" @click="GoFirend()">病友圈</van-tabbar-item>
        <van-tabbar-item icon="friends-o" @click="GoVido()">视频</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script setup>
import router from "@/router";
import {useRouter} from 'vue-router'
import Video from "@/views/Video/index.vue";
import disease from '@/views/disease/Disease.vue'

const GoDisease = () => {
  router.push('/home/disease')
};
const Gogirl = () =>{
  router.push('/girl')
}
const router5 = useRouter()
//跳转注册页
const GoFirend = () => {
  router.push({
    path: "/Friend",
  });
};

//跳转信息页
const msg = () => {
  router.push({
    path: "/message",
  });
}
const GoVido = () => {
  router.push({
    path: "/Video",
  });
};
//去登录页
const GoLogin = () => {
  //判断本地存储中是否存在token
  if (localStorage.getItem('token')) {
    //存在token，跳转到首页
    router.push({ path: '/my' })
  } else {
    //不存在token，跳转到登录页
    router.push({ path: '/login' })
  }
}
//点击跳转二级搜索页
const GoSearch = () => {
  router.push({
    
    path: "/home/search",
  });
};
</script>

<style lang="scss">
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  /* background-color: #247ed8; */
  padding: 10px;
  text-align: center;
  display: flex;
  /* position: fixed;
  width: 100%;
  height: 60px;
  background-color: red; */
  img {
    width: 25px;
    height: 25px;
  }
  button {
    background-color: none;
    border: white;
    margin-left: 8px;
  }
}
.footer {
  /* background-color: #247ed8; */
  padding: 10px;
  text-align: center;
}
.main {
  flex: 1;
  padding: 10px;
  overflow: scroll;

  .swipe {
    width: 102%;
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    width: 100%;
    height: 150px;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .baodian {
    width: 100%;
    height: 30px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    margin-top: 1px;
    line-height: 10px;
    padding-left: 7px;
  }

  .wenzhen {
    width: 100%;
    height: 30px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    margin-top: 1px;
    line-height: 10px;
    padding-left: 7px;
  }

  .pc {
    width: 100%;
    height: 30px;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    padding-left: 7px;
    line-height: 20px;
  }

  .zx {
    width: 100%;
    height: 30px;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    padding-left: 7px;
    line-height: 20px;
  }

  .ke {
    width: 100%;
    height: 178px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  .xiong {
    width: 100%;
    height: 180px;
    margin-top: 1px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .tabqh {
    width: 100%;
    flex: 1;

    .yys {
      width: 100%;
      height: 130px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;

      dl {
        width: 100%;
        height: 100%;
        display: flex;

        dt {
          width: 40%;
          height: 80%;

          img {
            width: 100%;
            height: 100%;
          }
        }

        dd {
          width: 60%;
          height: 100%;
          font-size: 12px;
        }
      }
    }

    .zs {
      width: 100%;
      height: 130px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      margin-top: 1px;

      p {
        font-size: 10px;
      }

      .tp {
        width: 100%;
        height: 80%;

        img {
          width: 30%;
          height: 100%;
        }
      }
    }
  }

  .xuan {
    width: 100%;
    height: 170px;
    display: flex;

    .bing {
      width: 48%;
      height: 99%;
      margin-left: 3px;
      border: 1px solid #ccc;

      p {
        font-size: 10px;
      }

      img {
        width: 100%;
        height: 80%;
      }
    }

    .yao {
      width: 48%;
      height: 99%;
      border: 1px solid #ccc;
      margin-left: 4px;

      p {
        font-size: 10px;
      }

      img {
        width: 100%;
        height: 80%;
      }
    }
  }
}

@media (max-width: 600px) {

  .header,
  .footer {
    font-size: 14px;
  }

  .main {
    font-size: 16px;
  }
}
.Sech_div{
  margin-left: 10px;
  width: 300px;
  display: flex;
   border: 1px solid #ccc;
   align-items: center;
   border-radius: 30px;
  input {
    width: 100%;
    height: 25px;
    list-style: none;
    border: 1px solid #ccc;
   border-radius: 30px;
    margin-left: 8px;
  }
}
</style>